<template lang="pug">
.scene-hang
  .scene-hang-group(v-if="getSceneList")
    .scene-hang-group-item(v-for="(item, index) in getSceneList"
    @click="showGroupHotspot(item, index)"
    @mouseenter="hoverGroupHotspot(item, index, true)"
    @mouseleave="hoverGroupHotspot(item, index, false)"
    :style="styleArr[index].active?styleObjectActive:styleObjectDefault")
      span(:class="{active: styleArr[index].active}") {{item.album}}
  .scene-hang-logo
    img(:src="getLogoImage")
</template>

<script>
import { mapGetters } from 'vuex'
import { DeepCloneData, isJSON } from '@/utils'
export default {
  data() {
    return {
      styleArr: [],
      styleObjectDefault: {
        background: 'url(static/images/z1.png) no-repeat 100% 100%',
      },
      styleObjectActive: {
        background: 'url(static/images/z2.png) no-repeat 100% 100%',
      },
      baseApiPlugins: $globalconfig.URLS.PLUGIN_API,
    }
  },
  computed: {
    ...mapGetters([
      'hotspots',
      'aerialSceneId',
      'panoInfo',
      'sceneGroup',
    ]),
    // 获取场景分组
    getSceneList() {
      if (this.sceneGroup && this.panoInfo) {
        if ((this.panoInfo && this.panoInfo.templatetype !=11) || (this.panoInfo && this.panoInfo.templatetype == 11 && !this.panoInfo.is_show_aerial)) {
          return false
        }
        if (this.sceneGroup && this.sceneGroup.length > 0) {
          this.sceneGroup.map((item, index) => {
            this.styleArr.push({
              index: index,
              active: false,
              click: false,
            })
          })
        }
        console.log(this.sceneGroup)
        return this.sceneGroup
        // return DeepCloneData(this.sceneGroup)
      }
    },
    // 获取logo
    getLogoImage() {
      if (this.panoInfo) {
        return this.panoInfo.full_logo_url
      }
    }
  },
  methods: {
    // 悬停事件
    hoverGroupHotspot(data, index, isEnter) {
      this.styleArr.map((item, ix) => {
        if (index == ix) {
          if (item.active) {
            if (!item.click) {
              item.active = false
              let showAll = true
              this.styleArr.map((sty, styix) => {
                if (sty.active) {
                  showAll = false
                  this.handleHots(this.sceneGroup[styix])
                }
              })
              if (showAll) {
                this.handleAllHots()
              }
            }
          } else {
            if (isEnter) {
              item.active = true
              this.handleHots(data)
            }
            
          }
        }
        // else {
        //   item.active = false
        // }
      })
    },
    // 点击显示分组热点
    showGroupHotspot(data, index) {
      this.styleArr.map((item, ix) => {
        if (index == ix) {
          
          if (item.active) {
            if (item.click) {
              item.active = false
              this.handleAllHots()
            }
            
          } else {
            item.active = true
            this.handleHots(data)
          }
          item.click = !item.click
        } else {
          item.active = false
          item.click = false
        }
      })
    },
    // 处理显示所有的场景热点
    handleAllHots() {
      let hots = []
      if (this.hotspots && this.aerialSceneId) {
        if (this.hotspots[this.aerialSceneId].hotspotlist && this.hotspots[this.aerialSceneId].hotspotlist.length > 0) {
          hots = this.hotspots[this.aerialSceneId].hotspotlist
          hots.map(item => {
            item.biaoji = false
            this.$krp._krpano.set(`hotspot[hotspot_${item.hot_id}].visible`, true)
            const tool = this.$krp._krpano.get(`plugin[tooltip_${"hotspot_" + item.hot_id}]`)
            if (!tool) return
            const el = tool.sprite.querySelector('td > div')
            if (el) {
              if (isJSON(item.datastr)) {
                let datastrobj = JSON.parse(item.datastr)
                let icon = datastrobj.full_default_icon ? datastrobj.full_default_icon : this.baseApiPlugins + datastrobj.default_icon
                tool.sprite.parentNode.style['background-image'] = `url(${icon})`
                el.style['background-color'] = 'rgba(0,0,0,0.5)'
                el.style.color = '#fff'
              }
              
            }
          })
        }
      }
      if (hots.length == 0) {
        return this.$vgo.tip('没有对应的场景热点', 'warning')
      }
    },
    // 处理显示对应分组的场景热点
    handleHots(data) {
      let sceneIds = [], hotIds = []
      if (data && data.scenelist && data.scenelist.length > 0) {
        data.scenelist.map(sc => {
          sceneIds.push(sc.scene_id)
        })
      }
      // console.log(sceneIds)
      if (sceneIds.length == 0) {
        return this.$vgo.tip('没有对应的场景热点', 'warning')
      }
      if (this.hotspots && this.aerialSceneId) {
        if (this.hotspots[this.aerialSceneId].hotspotlist && this.hotspots[this.aerialSceneId].hotspotlist.length > 0) {
          let hots = this.hotspots[this.aerialSceneId].hotspotlist
          hots.map(item => {
            if (isJSON(item.datastr)) {
              let obj = JSON.parse(item.datastr)
              sceneIds.map(sc => {
                if (sc == obj.scene_id) {
                  hotIds.push(item.hot_id)
                }
              })
            }
            
          })
        }
      }
      // console.log(hotIds)
      if (hotIds.length == 0) {
        return this.$vgo.tip('没有对应的场景热点', 'warning')
      }
      let allHotIds = []
      let hotsArr = this.hotspots[this.aerialSceneId].hotspotlist
      hotsArr.map(item => {
        allHotIds.push(item.hot_id)
      })
      let difference = hotIds.filter(x => allHotIds.indexOf(x) == -1).concat(allHotIds.filter(x => hotIds.indexOf(x) == -1))
      // console.log(difference)
      difference.map(item => {
        this.$krp._krpano.set(`hotspot[hotspot_${item}].visible`, false)
      })
      hotIds.map(item => {
        let datastrobj = {}
        hotsArr.map(hot => {
          if (item == hot.hot_id) {
            if (isJSON(hot.datastr)) {
              datastrobj = JSON.parse(hot.datastr)
              hot.biaoji = true
            }
          }
        })
        this.$krp._krpano.set(`hotspot[hotspot_${item}].visible`, true)
        const tool = this.$krp._krpano.get(`plugin[tooltip_${"hotspot_" + item}]`)
        if (!tool) return
        const el = tool.sprite.querySelector('td > div')
        if (el) {
          let icon = datastrobj.full_chosen_icon ? datastrobj.full_chosen_icon : this.baseApiPlugins + datastrobj.chosen_icon
          tool.sprite.parentNode.style['background-image'] = `url(${icon})`
          el.style['background-color'] = 'rgba(221,221,221,0.5)'
          el.style.color = '#333'
        }
      })
    },
  }
}
</script>

<style lang="stylus">
.scene-hang
  position absolute
  z-index 3
  top 50px
  left 0
  width 97%
  height 180px
  text-align right
  .scene-hang-group
    text-align right
    display inline-block
    width 80%
    vertical-align text-bottom
    height 180px
    .scene-hang-group-item
      // display inline-block
      float right
      width 30px
      font-size 16px
      height 180px
      margin-left 5px
      cursor pointer
      text-align center
      padding 0 13px 0 5px
      writing-mode vertical-rl
      writing-mode tb-rl
      overflow hidden
      span
        width 25px
        overflow hidden
        display inline-block
        height 100%
        word-wrap break-word
        word-break break-all
        writing-mode vertical-lr
        writing-mode tb-lr
    		letter-spacing 3px
      span.active
        color #ffffff
  .scene-hang-logo
    width 15%
    max-width 100px
    height 180px
    display inline-block
    margin-left 5%
    
    img
      width 100%
      max-width 100px
      height auto

@media screen and (min-width: 768px) {
  .scene-hang-logo {
    margin-left 30px !important
  }
}
</style>
